<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		input,
		button {
			background: transparent;
			border: 0;
			outline: none;
		}

		body {
			height: 100vh;
			background: linear-gradient(#141e30, #243b55);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			color: #03e9f4;
		}

		.loginBox {
			width: 400px;
			height: 364px;
			background-color: #0c1622;
			margin: 100px auto;
			border-radius: 10px;
			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
			padding: 40px;
			box-sizing: border-box;
		}

		h2 {
			text-align: center;
			color: aliceblue;
			margin-bottom: 30px;
			font-family: 'Courier New', Courier, monospace;
		}

		.item {
			height: 45px;
			border-bottom: 1px solid #fff;
			margin-bottom: 40px;
			position: relative;
		}

		.item input {
			width: 100%;
			height: 100%;
			color: #fff;
			padding-top: 20px;
			box-sizing: border-box;
		}

		.item input:focus+label,
		.item input:valid+label {
			top: 0px;
			font-size: 2px;
		}

		.item label {
			position: absolute;
			left: 0;
			top: 12px;
			transition: all 0.5s linear;
		}

		.btn {
			padding: 10px 20px;
			margin-top: 30px;
			color: #03e9f4;
			position: relative;
			overflow: hidden;
			text-transform: uppercase;
			letter-spacing: 2px;
			left: 35%;
		}

		.btn:hover {
			border-radius: 5px;
			color: #fff;
			background: #03e9f4;
			box-shadow: 0 0 5px 0 #03e9f4,
				0 0 25px 0 #03e9f4,
				0 0 50px 0 #03e9f4,
				0 0 100px 0 #03e9f4;
			transition: all 1s linear;
		}

		.btn>span {
			position: absolute;
		}

		.btn>span:nth-child(1) {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left, transparent, #03e9f4);
			left: -100%;
			top: 0px;
			animation: line1 1s linear infinite;
		}

		@keyframes line1 {

			50%,
			100% {
				left: 100%;
			}
		}

		.btn>span:nth-child(2) {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top, transparent, #03e9f4);
			right: 0px;
			top: -100%;
			animation: line2 1s 0.25s linear infinite;
		}

		@keyframes line2 {

			50%,
			100% {
				top: 100%;
			}
		}

		.btn>span:nth-child(3) {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left, #03e9f4, transparent);
			left: 100%;
			bottom: 0px;
			animation: line3 1s 0.75s linear infinite;
		}

		@keyframes line3 {

			50%,
			100% {
				left: -100%;
			}
		}

		.btn>span:nth-child(4) {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top, transparent, #03e9f4);
			left: 0px;
			top: 100%;
			animation: line4 1s 1s linear infinite;
		}

		@keyframes line4 {

			50%,
			100% {
				top: -100%;
			}
		}
	</style>
</head>

<body>
    <div class="loginBox">
        <h2>OJ login</h2>
        <form id="loginForm">
            <div class="item">
                <input type="text" id="userName" required>
                <label for="userName">账号</label>
            </div>
            <div class="item">
                <input type="password" id="password" required>
                <label for="password">密码</label>
            </div>
            <button class="btn" id="loginButton" type="submit">登录
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
            <!-- 添加注册按钮 -->
            <button class="btn" id="registerButton" type="button">去注册
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
        </form>
    </div>
    <script>
        // 获取登录按钮、用户名输入框、密码输入框和表单元素
        const loginButton = document.getElementById('loginButton');
        const registButton=document.getElementById('registerButton');
        const userNameInput = document.getElementById('userName');
        const passwordInput = document.getElementById('password');
        const loginForm = document.getElementById('loginForm');
    
        // 为登录按钮添加点击事件监听器
        loginButton.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
    
            // 检查用户名和密码输入框是否有内容
            if (!userNameInput.value.trim() || !passwordInput.value.trim()) {
                // 如果没有输入，则提示用户输入
                alert('请填写用户名和密码');
                return; // 退出事件处理函数
            }
    
            // 如果输入框都有内容，则创建FormData对象，用于构建发送到服务器的数据
            const formData = new FormData();
            formData.append('userid', userNameInput.value);
            formData.append('password', passwordInput.value);
    
            // 使用fetch API发送POST请求
            fetch('/login', { // 替换为你的服务器端点
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // 假设服务器返回JSON格式的响应
            })
            .then(data => {
                console.log('Success:', data);
                // 处理登录成功的逻辑，例如跳转到另一个页面
				if(data.status=="true")
				{
					alert("登录成功!");
					window.location.href = '/questions_page';
				}
				else
				alert("账号密码错误，请重新输入!");
            })
            .catch((error) => {
                console.error('Error:', error);
                // 处理登录失败的逻辑，例如显示错误消息
            });
        });
		var registerButton = document.getElementById('registerButton');

		// 为按钮添加点击事件监听器
		registerButton.addEventListener('click', function () {
			// 在这里实现跳转到注册页面的逻辑
			window.location.href = 'register.html'; // 假设注册页面的URL是register.html

		});
    </script>
</body>
</html>

